<template>
  <view class="accommodation-records flexc">
    <view class="header">
      <u-tabs
        :current="tabCurrent"
        :scrollable="true"
        :list="tabList"
        keyName="title"
        lineColor="#F49C0D"
        :lineWidth="58"
        :lineHeight="2"
        @click="tabClick"
        :itemStyle="{
          height: '88rpx',
          width: '25%',
          fontSize: '28rpx',
          color: '#333333',
        }"
        :activeStyle="{ fontWeight: 'bold', color: '#000000' }"
        :inactiveStyle="{}"></u-tabs>
    </view>
    <view class="flex1 over">
      <scroll-view scroll-y="true" style="height: 100%">
        <view class="wrap">
          <view class="box">
            <view class="flex-between">
              <view class="time">申请时间：2131</view>
              <view class="status">住宿申请</view>
            </view>
            <view class="t">申请内容</view>
            <view class="des">内容</view>
            <view class="box-btn flex-j-e">
              <view
                class=""
                @click="
                  toRoute({
                    path: '/record-detail',
                    query: {
                      type: 1,
                      status: 1,
                    },
                  })
                ">
                订单详情
              </view>
              <view class="" @click="toRoute('/refund-record')">申请退宿</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="footer">
      <view class="">申请住宿</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabCurrent: 0,
      tabList: [
        {
          title: "全部",
          value: 0,
        },
        {
          title: "住宿申请",
          value: 2,
        },
        {
          title: "住宿通过",
          value: 3,
        },
        {
          title: "退宿申请",
          value: 4,
        },
        {
          title: "退宿通过",
          value: 5,
        },
        {
          title: "已驳回",
          value: 6,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.accommodation-records {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  padding-bottom: env(safe-area-inset-bottom);
  .header {
    height: 88upx;
    background: #fff;
  }
  .wrap {
    height: 100%;
    box-sizing: border-box;
    padding: 24upx 32upx;
    background: #f6f6f6;
    .box {
      margin-bottom: 24upx;
      padding: 36upx 24upx 40upx;
      background: #fff;
      .time {
        font-weight: 400;
        font-size: 20rpx;
        color: #000000;
      }
      .status {
        font-weight: 400;
        font-size: 20rpx;
        color: #f40d0d;
      }
      .t {
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
        margin: 24upx 0 14upx;
      }
      .des {
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
      }
      &-btn {
        margin-top: 36upx;
        & > view {
          width: 160rpx;
          height: 64rpx;
          background: #f6f6f6;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          text-align: center;
          line-height: 64upx;
          font-size: 24rpx;
          color: #333333;
        }
        & > view:nth-of-type(2) {
          margin-left: 24upx;
          background: #f49c0d;
          color: #fff;
        }
      }
    }
  }
  .footer {
    padding: 8upx 32upx;
    & > view {
      width: 686rpx;
      height: 80rpx;
      background: #f49c0d;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      text-align: center;
      line-height: 80upx;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}
</style>
